<template>
	<div class="goodsInfo-imgBox">
		<el-carousel ref="imgCarousel" indicator-position="none" height="350px" @change="imageChange">
			<el-carousel-item v-for="(url, index) in imgsList" :key="`yl-${index}-${url}`">
				<el-image style="width: 350px; height: 350px;border-radius: 10px;" :src="checkUrl(url)" :zoom-rate="1.2"
					:max-scale="7" :min-scale="0.2" :preview-src-list="imgsList" show-progress preview-teleported
					:initial-index="index" fit="cover" />
			</el-carousel-item>
		</el-carousel>
		<div class="imgList sa-flex">
			<el-button class="imgList-btn" color="#F7F7F7" @click="imgToBack">
				<el-icon color="#8C8C8C">
					<ArrowLeftBold />
				</el-icon>
			</el-button>
			<el-scrollbar class="sa-flex-1" ref="imgScrollbar">
				<div class="imgBox">
					<div :class="['imgBox-img', { active: state.imgIndex == index }]" v-for="(url, index) in imgsList"
						:key="`imgs-${index}-${url}`">
						<el-image style="width: 50px; height: 50px;border-radius: 4px;" :src="checkUrl(url)"
							show-progress fit="cover" @click="imgTap(index)" />
					</div>
				</div>
			</el-scrollbar>
			<el-button class="imgList-btn"  color="#F7F7F7" @click="imgToNext">
				<el-icon color="#8C8C8C">
					<ArrowRightBold />
				</el-icon>
			</el-button>
		</div>
	</div>
</template>
<script setup>
import { ref, reactive, computed, watch, watchEffect } from 'vue';
import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

const imgScrollbar = ref(null)
const imgCarousel = ref(null)
const props = defineProps({
	list: {
		type: Array,
		default: () => []
	},
});
const state = reactive({
	imgIndex: 0,
});
const imgsList = computed(() => props.list.map(item => checkUrl(item)))
function imgToBack() {
	if (imgScrollbar.value) {
		state.imgIndex = state.imgIndex > 0 ? state.imgIndex - 1 : 0;
		setScroll()
		imgCarousel.value.setActiveItem(state.imgIndex)
	}
}
function imgToNext() {
	if (imgScrollbar.value) {
		let length = imgsList.value.length - 1
		state.imgIndex = state.imgIndex < length ? state.imgIndex + 1 : length;
		setScroll()
		imgCarousel.value.setActiveItem(state.imgIndex)
	}
}
function setScroll() {
	if (imgScrollbar.value) {
		imgScrollbar.value.setScrollLeft(state.imgIndex * 60);
	}
}
function imageChange(index) {
	state.imgIndex = index;
	setScroll()
}
function imgTap(index) {
	if (imgCarousel.value) {
		state.imgIndex = index;
		imgCarousel.value.setActiveItem(state.imgIndex)
	}
}

</script>
<style lang="scss" scoped>
.goodsInfo-imgBox {
	width: 350px;
	height: 420px;
}

.imgList {
	margin-top: 16px;

	.imgList-btn {
		width: 24px;
		height: 54px;
	}

	.imgBox {
		display: flex;
		width: fit-content;

		.imgBox-img {
			border: 2px solid transparent;
			border-radius: 4px;
			margin: 0 4px;
			flex-shrink: 0;
			display: flex;
		}

		.active {
			border: 2px solid #3768FA;
		}
	}
}
</style>